<template>
  <!--
  菜单
-->
  <!-- 新增 -->
  <a-modal
      :title="usertitle"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="tijiaobumen"
      @cancel="handleCancel"
      :destroyOnClose="true"
      cancel-text="取消"
      ok-text="确定"
  >
    <a-form-model
        ref="bumenform"
        :model="bumenform"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 15 }"
        @submit="tijiaobumen"
    >
      <a-form-model-item label="菜单类型" prop="type">
        <a-select v-model="bumenform.type" placeholder="请选择菜单类型">
          <a-select-option
              v-for="(item, i) in typearr"
              :key="i"
              :value="item.id"
          >{{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="菜单名称" prop="name">
        <a-input placeholder="请输入菜单名称" v-model="bumenform.name"/>
      </a-form-model-item>
      <a-form-model-item label="菜单URL" prop="webUrl">
        <a-input placeholder="请输入菜单URL" v-model="bumenform.webUrl"/>
      </a-form-model-item>
      <a-form-model-item label="组件标识" prop="component">
        <a-input placeholder="请输入组件标识" v-model="bumenform.component"/>
      </a-form-model-item>
      <a-form-model-item label="是否显示在菜单" prop="status">
        <a-select v-model="bumenform.status" placeholder="请选择">
          <a-select-option :value="0">显示</a-select-option>
          <a-select-option :value="1">不显示</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="强制菜单显示" prop="hideChildrenInMenu">
        <a-select v-model="bumenform.hideChildrenInMenu" placeholder="请选择">
          <a-select-option :value="0">显示</a-select-option>
          <a-select-option :value="1">不显示</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="重定向地址" prop="redirect">
        <a-input placeholder="请输入重定向地址" v-model="bumenform.redirect"/>
      </a-form-model-item>

      <a-form-model-item label="选择模块" prop="moduleId">
        <a-tree-select
            v-model="bumenform.moduleId"
            style="width: 100%"
            :tree-data="mukuaiTree"
            placeholder="请选择模块"
            :show-checked-strategy="SHOW_PARENT"
            :replaceFields="replaceFields"
            @change="selectgongsitree"
        />
      </a-form-model-item>
      <a-form-model-item label="排序" prop="orderNum">
        <a-input placeholder="请输入排序" v-model="bumenform.orderNum"/>
      </a-form-model-item>
      <a-form-model-item label="上级菜单" prop="parentId">
        <a-tree-select
            v-model="bumenform.parentId"
            style="width: 100%"
            :tree-data="bumentreeData"
            placeholder="请选择上级菜单"
            :show-checked-strategy="SHOW_PARENT"
            :replaceFields="replaceFields"
            @change="selectgongsitree"
            allowClear
        />
      </a-form-model-item>
      <a-form-model-item label="上传图片-默认" prop="logoUrl">
        <UploadImg
            ref="LogoUrl"
            :file-types="[
            'png',
            'PNG',
            'jpg',
            'JPG',
            'jpeg',
            'JPEG',
            'svg',
            'SVG'
          ]"
            :num="1"
            :file-list="fileList"
            @successFile="huidiao"
        />
      </a-form-model-item>
      <a-form-model-item label="上传图片-激活" prop="logoCheckUrl">
        <UploadImg
            :file-types="[
            'png',
            'PNG',
            'jpg',
            'JPG',
            'jpeg',
            'JPEG',
            'svg',
            'SVG'
          ]"
            ref="LogoCheckUrl"
            @successFile="huidiaoActive"
            :file-list="fileListActive"
            :num="1"
        />
      </a-form-model-item>
      <a-form-model-item
          label="权限按钮"
          prop="authority"
          v-if="bumenform.type == 1"
      >
        <a-checkbox-group
            :options="options"
            @change="onChange"
            v-model="bumenform.authority"
        >
        </a-checkbox-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import {TreeSelect} from "ant-design-vue";
import {getTreeData} from "@/utils/util";
import {caidanTree, getid, mokuaiTree, sava} from "@/api/menument";
import {queryByTypeCodeList} from "@/api/datadictionary";
// import UploadImg from "@/views/component/uploadimg";
import UploadImg from "@/components/upload/image";

export default {
  data() {
    return {
      SHOW_PARENT: TreeSelect.SHOW_PARENT,
      replaceFields: {
        children: "childList",
        title: "name",
        key: "id",
        value: "id"
      },
      usertitle: "",
      visible: false,
      confirmLoading: false,
      // bumenform: this.$form.createForm(this, { name: "coordinated1" }),
      bumenform: {
        id: "",
        name: "",
        webUrl: "",
        type: undefined,
        moduleId: undefined,
        orderNum: "",
        parentId: undefined,
        logoUrl: [],
        logoCheckUrl: [],
        authority: [],
        status: 0,
        hideChildrenInMenu: 0,
        redirect: "",
        component: ""
      },
      rules: {
        name: [{required: true, message: "请输入菜单名称"}],
        webUrl: [{required: true, message: "请输入菜单URL"}],
        type: [{required: true, message: "请选择菜单类型"}],
        moduleId: [{required: true, message: "请选择模块"}],
        orderNum: [{required: true, message: "请输入排序"}],
        parentId: [{required: false, message: "请选择上级菜单"}],
        logoUrl: [{required: false, message: "请上传logo"}],
        authority: [{required: false, message: "请选择权限"}],
        status: [{required: true, message: "请选择"}],
        hideChildrenInMenu: [{required: false, message: "请选择"}],
        redirect: [{required: false, message: "请输入"}],
        component: [{required: false, message: "请输入"}]
      },

      fileList: [],
      fileListActive: [],
      bumentreeData: [],
      mukuaiTree: [],
      typearr: [
        {id: 0, name: "目录"},
        {id: 1, name: "菜单"}
        // { id: 2, name: "权限" },
      ],
      options: [
        // { label: "添加", value: "add" },
        // { label: "编辑", value: "edit" },
        // { label: "删除", value: "del" },
        // { label: "批量删除", value: "delete_batch" },
      ],
      bianjiId: ""
    };
  },
  components: {
    UploadImg
  },
  watch: {
    "bumenform.authority"(val) {
      console.log("authority=1wa--", val);
    }
  },
  created() {
    this.queryByTypeCodeListFn();
  },
  methods: {
    // 获取数据字典权限
    async queryByTypeCodeListFn() {
      let res = await queryByTypeCodeList({code: "authority"});
      if (res.code == 0) {
        let list = [];
        res.data.map(item => {
          let ite = {label: item.dictLabel, value: item.dictValue};
          // let ite = { label: item.dictLabel, value: item.id };
          list.push(ite);
        });
        this.options = list;
      }
    },
    //打开弹窗
    async open(type, record) {
      //获取模块和菜单
      await this.getmokuai();
      await this.getbumenTree();
      if (type == "add") {
        this.bianjitype = 0;
        this.usertitle = "新增";
      } else {
        this.bianjitype = 1;
        this.bumenform.id = record.id;
        this.usertitle = "编辑";
      }
      if (record) {
        this.bumenform.id = record.id;
        this.getDetail(record);
      }
      this.visible = true;
    },
    //取消弹窗
    handleCancel() {
      this.confirmLoading = false;
      this.visible = false;
      this.bumenform = {
        id: "",
        name: "",
        webUrl: "",
        type: undefined,
        moduleId: undefined,
        orderNum: "",
        parentId: undefined,
        logoUrl: "",
        authority: [],
        status: 0
      };
    },
    //获取模块
    async getmokuai() {
      let response = await mokuaiTree();
      if (response.code == 0) {
        this.mukuaiTree = response.data.records;
        // this.clicktree([]);
      }
    },
    // 获取公司部门树
    async getbumenTree(val) {
      // console.log('val---',val)
      let response = await caidanTree({
        types: "0,1",
        ...val
      });
      console.log("获取公司部门树---", response.data);
      if (response.code == 0) {
        this.bumentreeData = response.data;
      } else {
        this.$notification.error({
          message: "失败",
          description: response.msg
        });
      }
    },
    //选择公司树
    selectgongsitree(value, label, extra) {
      this.bumenarr = "";
      let arr = [];
      arr.push(value);
      console.log("公司", value);
      console.log("公司", arr);
      this.bumenarr = getTreeData(arr, this.treeData);
      console.log(this.bumenarr);
    },
    // 编辑获取详情
    async getDetail(record) {
      console.log("编辑---传入---", record);
      let response = await getid({id: record.id});
      if (response.code == 0) {
        console.log("获取返回结果---", response.data);
        this.visible = true;
        this.bumenform = {};
        this.$nextTick(() => {
          this.bumenform = {
            id: response.data.id,
            name: response.data.name,
            webUrl: response.data.webUrl,
            status: response.data.status,
            type: response.data.type,
            moduleId: response.data.moduleId,
            orderNum: response.data.orderNum,
            parentId: response.data.parentId == 0 ? "" : response.data.parentId,

            hideChildrenInMenu: response.data.hideChildrenInMenu,
            redirect: response.data.redirect,
            component: response.data.component
          };
          if (response.data.authority != "") {
            this.bumenform.authority = response.data.authority.split(",");
          }
          if (response.data.logoUrl != "") {
            this.bumenform.logoUrl =[{
              uid: "-1",
              name: `${response.data.logoUrl}logo`,
              status: "done",
              url: response.data.logoUrl
            }];
          }
          if (response.data.logoCheckUrl != "") {
            this.bumenform.logoCheckUrl = [{
              uid: "-1",
              name: `${response.data.logoCheckUrl}logo`,
              status: "done",
              url: response.data.logoCheckUrl
            }]
          }
          console.log(this.bumenform);
          // console.log("this.bumenform.authority -", this.bumenform.authority);
        });
        this.fileList = [];
        if (response.data.logoUrl) {
          this.fileList = [
            {
              uid: "-1",
              name: `${response.data.name}logo`,
              status: "done",
              url: response.data.logoUrl
            }
          ];
          // console.log("fileList----", this.fileList);
        }
      }
    },
    //提交新增
    tijiaobumen(e) {
      // console.log(this.fileList[0].response.code);
      this.$refs["bumenform"].validate(async valid => {
        if (valid) {
          this.confirmLoading = true;
          let logoUrl;
          let logoCheckUrl;
          let authority = ""; //权限
          if (
              this.bumenform.authority != undefined &&
              this.bumenform.authority.length > 0
          ) {
            authority = this.bumenform.authority.join(",");
          }

             if (
              this.fileList.length > 0 &&
              this.fileList[0].response &&
              this.fileList[0].response.code == 0
          ) {
            logoUrl = this.fileList[0].response.data.url;
          }
          if (
              this.fileListActive.length > 0 &&
              this.fileListActive[0].response &&
              this.fileListActive[0].response.code == 0
          ) {
            logoCheckUrl = this.fileListActive[0].response.data.url;
          }
          let response = await sava({
            ...this.bumenform,
            logoUrl: logoUrl,
            logoCheckUrl: logoCheckUrl,
            authority
          });

          console.log("response", response);
          if (response.code == 0) {
            this.getmokuai();
            this.$notification.success({
              message: "成功",
              description: response.msg
            });
            this.handleCancel();
            this.$emit("onSave");
          }
          this.confirmLoading = false;
        }
      });
    },
    //回调
    huidiao(res) {
      if(res.length ===0){
        this.$refs.LogoUrl.fileLists=[]
      }
      this.fileList= res
      this.bumenform.logoUrl = res;
      console.log(this.bumenform.logoUrl);
    },
    //回调
    huidiaoActive(res) {
      this.fileListActive= res
      if(res.length ===0){
        this.$refs.LogoCheckUrl.fileLists=[]
      }
      this.bumenform.logoCheckUrl = res;
      console.log(this.bumenform.logoCheckUrl);
    },

    // 权限多选
    onChange(checkedValues) {
      // console.log("checked = ", checkedValues);
      this.$set(this.bumenform, "authority", checkedValues);
      this.$forceUpdate();
      // console.log("this.bumenform.authority = ", this.bumenform.authority);
    }
  }
};
</script>

<style lang="scss" scoped></style>